<template>
  <div class="w-full h-auto" :class="{
    'cursor-pointer': edit ?? true,
    'preview-block-active': (edit ?? true) && isActive
  }" :style="{ background: props.tabs.bgColor }" @click="handlePreviewClick">

    <section class="relative max-w-[1200px] mx-auto py-[16px] px-[32px]">
      <el-tabs v-model="activeIndex" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane v-for="(tab, i) in props.tabs.list" :key="tab.id"
          :label="tab.title || ($t('competition.modules.tabs.title') + (i + 1))" :name="i">
          <div class="rounded-[8px]">
            <!-- 使用Markdown渲染器显示内容，支持图片正确展示 -->
            <MarkdownViewer :content="props.tabs.list[activeIndex]?.content || ''" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </section>
  </div>
</template>
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { $t } from '#/locales'
import type { TabsState } from './tabs-module.vue'
import MarkdownViewer from '#/components/MarkdownViewer.vue';

const emit = defineEmits<{
  (e: 'update:active', index: number): void;
  (e: 'click'): void;
}>()

const props = defineProps<{
  tabs: TabsState;
  edit?: boolean;
  isActive?: boolean;
}>()

// 将预览区与数据源联动：受 props.tabs.active 驱动
const activeIndex = ref(0)
watchEffect(() => { activeIndex.value = props.tabs.active ?? 0 })

// 预览区块点击事件处理
const handlePreviewClick = (event: Event) => {
  // 只在编辑模式下处理点击事件
  if (props.edit ?? true) {
    event.stopPropagation()
    emit('click')
  }
}

const handleClick = (tab: TabsPaneContext) => {
  emit('update:active', +(tab.index || 0))
}
</script>

<style scoped>
.preview-tabs {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 42px;
  padding: 0 12px;
}

.preview-tab {
  position: relative;
  padding: 0 4px;
  height: 42px;
  line-height: 42px;
  color: #86909C;
  cursor: pointer;
}

.preview-tab.active {
  color: #1D2129;
  font-weight: 600;
}

.preview-tab.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: #3370ff;
}

/* 预览区块激活状态样式 */
.preview-block-active {
  border: 1px dashed #000000;
  /* border-radius: 4px; */
  transition: border 0.3s ease;
}
</style>
